<template>
	<view class="menu-container">
		<scroll-view class="scroll-container" scroll-y :scroll-top="scrollTop" @scroll="onScroll" scroll-with-animation>
			<view class="menu-content">
				<view class="menu-item" v-for="(item, index) in menuList" :key="item.id" :id="'menu-item-' + index"
					:class="{ 'active': currentIndex === index }" @click="handleClick(index)">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuList: [{
						id: 1,
						name: '首页'
					},
					{
						id: 2,
						name: '分类'
					},
					{
						id: 3,
						name: '发现'
					},
					{
						id: 4,
						name: '购物车'
					},
					{
						id: 5,
						name: '我的'
					},
					{
						id: 6,
						name: '设置'
					},
					{
						id: 7,
						name: '帮助'
					}
				],
				currentIndex: 0,
				scrollTop: 0,
				itemHeight: 80, // 单个菜单项高度(rpx)
				visibleItems: 4, // 可见菜单项数量
				containerHeight: 320, // 容器高度(rpx)
				isScrolling: false, // 是否正在滚动
				animationDuration: 300, // 动画持续时间(ms)
				lastClickIndex: 0, // 上次点击的索引
				scrollMode: 'relative' // 滚动模式：relative/position
			}
		},
		methods: {
			handleClick(index) {
				// 如果正在滚动，不做处理
				if (this.isScrolling) return

				// 基于相对位置的滚动逻辑
				if (this.scrollMode === 'relative') {
					// 计算与上次点击的位置关系
					const positionDiff = index - this.lastClickIndex

					// 基于位置关系决定滚动方向和距离
					let targetScrollTop = this.scrollTop

					if (positionDiff > 0) {
						// 向下点击，菜单向上滚动
						const scrollDistance = Math.min(
							positionDiff * this.itemHeight,
							this.getMaxScrollTop() - this.scrollTop
						)
						targetScrollTop = this.scrollTop + scrollDistance
					} else if (positionDiff < 0) {
						// 向上点击，菜单向下滚动
						const scrollDistance = Math.min(
							Math.abs(positionDiff) * this.itemHeight,
							this.scrollTop
						)
						targetScrollTop = this.scrollTop - scrollDistance
					}

					// 应用滚动
					if (Math.abs(targetScrollTop - this.scrollTop) > 1) {
						this.isScrolling = true
						this.scrollTop = targetScrollTop

						// 滚动动画结束后重置状态
						setTimeout(() => {
							this.isScrolling = false
						}, this.animationDuration)
					}
				}
				// 基于绝对位置的滚动逻辑 (保留原有的精确定位方式)
				else {
					// 获取目标元素位置
					uni.createSelectorQuery().in(this).select(`#menu-item-${index}`).boundingClientRect(rect => {
						if (!rect) return

						// 获取scroll-view容器位置
						uni.createSelectorQuery().in(this).select('.scroll-container').boundingClientRect(containerRect => {
							if (!containerRect) return

							// 计算目标元素相对于容器的位置
							const relativeTop = rect.top - containerRect.top

							// 目标位置：将选中项置于容器中央
							const targetPosition = (this.containerHeight - this.itemHeight) / 2

							// 计算需要滚动的距离
							const targetScrollTop = this.scrollTop + (relativeTop - targetPosition)

							// 应用滚动
							if (Math.abs(targetScrollTop - this.scrollTop) > 1) {
								this.isScrolling = true
								this.scrollTop = Math.max(0, Math.min(targetScrollTop, this.getMaxScrollTop()))

								// 滚动动画结束后重置状态
								setTimeout(() => {
									this.isScrolling = false
								}, this.animationDuration)
							}
						}).exec()
					}).exec()
				}

				// 更新当前选中项和上次点击索引
				this.currentIndex = index
				this.lastClickIndex = index
			},

			onScroll() {
				// 实时更新滚动状态
				this.isScrolling = true
			},

			// 计算最大滚动距离
			getMaxScrollTop() {
				return Math.max(0, this.menuList.length * this.itemHeight - this.containerHeight)
			}
		}
	}
</script>

<style>
	.menu-container {
		height: 320rpx;
		overflow: hidden;
		position: relative;
		border: 1rpx solid #eee;
	}

	.scroll-container {
		height: 100%;
	}

	.menu-content {
		padding: 0;
	}

	.menu-item {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
	}

	.menu-item.active {
		background-color: #f5f5f5;
		color: #007aff;
	}
</style>